<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>canvas4</title>
</head>

<body>
    <canvas id="app" width="500" height="600"></canvas>
    <script type="text/javascript">
    function draw23(id) {
        var canvas = document.getElementById(id);
        if (canvas == null) {
            return false;
        }

        var context = canvas.getContext('2d');

        var n = 0;

        //左侧1/4圆弧
        context.beginPath();
        context.arc(100, 150, 50, 0, Math.PI / 2, false);
        context.fillStyle = 'rgba(255,0,0,0.25)';
        context.fill();
        context.strokeStyle = 'rgba(255,0,0,0.25)'
        context.closePath();
        context.stroke();


        //右侧1/4圆弧

        context.beginPath();
        context.arc(300, 150, 50, 0, Math.PI / 2, false);
        context.fillStyle = 'rgba(255,0,0,0.25)';
        context.fill();
        context.strokeStyle = 'rgba(255,0,0,0.25)';
        context.closePath();
        context.stroke();
    }

    draw23("app");
    </script>
</body>

</html>
